<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>生产ERP管理系统</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<body>
<style>
    .gradient-header {
        background: linear-gradient(to right, #0F75FF, #2CD8D4); /* 从左到右的渐变色 */
        position: relative; /* 确保子元素可以正确定位 */
    }
</style>
<div id="root">
    <el-container style="height: 97vh">
        <el-header class="gradient-header" style="height: 55px; background-color: #ffffff;">
            <span style="text-align:center;font:bolder 20px 宋体">
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                    <el-radio-button :label="false"><i class="el-icon-s-unfold"></i></el-radio-button>
                    <el-radio-button :label="true"><i class="el-icon-s-fold"></i></el-radio-button>
                </el-radio-group>
            </span>
            <el-dropdown style="float:right;font-size: 12px">
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <span @click="tuichu">退出</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span style="float:right; font-size: 12px"><span
                    th:text="${session?.user?.username}"></span>&nbsp;&nbsp</span>
        </el-header>
        <el-container>
            <template>
                <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                    <el-submenu th:index="${kv.key.sort}" th:each="kv:${navData}">
                        <template slot="title">
                            <i th:class="${kv.key.icon}"></i>
                            <span th:text="${kv.key.permissionName}"></span>
                        </template>
                        <el-menu-item-group th:index="${kv.key.sort}" th:each="p:${kv.value}">
                            <el-menu-item index="1-1">
                                <template>
                                    <i th:class="${p.icon}"></i>
                                    <a th:href="${p.url}" target="main"
                                       th:text="${p.permissionName}"></a>
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </template>
            <el-main style="overflow: hidden;background-color: #EBF2FB">
                <iframe name="main" frameborder="0"
                        :src="shiyan.roleType === 1? '/pur/sellrep' : '/pur/sellrep'"
                        width="100%" height="100%"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>


<style>
    .el-header {
        /*background-color: #494949;*/
        color: white;
        line-height: 70px;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .el-submenu__title > i {
        color: #2ABB9B;
    }

    .el-submenu__title > span {
        color: white;
    }

    .el-menu {
        background-color: #0D102C;
        list-style: none;
        position: relative;
        margin: 0;
        padding-left: 0;
    }

    .el-menu-item:hover {
        background: linear-gradient(to right, #0F75FF, #2CD8D4); /* 从左到右的渐变色 */
        position: relative;
    }

    .el-submenu__title:hover {
        background: linear-gradient(to right, #0F75FF, #2CD8D4); /* 从左到右的渐变色 */
        position: relative;
    }

    .el-aside {
        color: #333;
    }

    .el-menu-item > a {
        color: white;
    }

    a {
        color: #333333;
        text-decoration: none;
    }
</style>

<script>
    new Vue({
        el: "#root",
        data() {
            return {
                drawer: false,
                direction: 'ltr',
                isCollapse: true,
                shiyan:{}
            };
        },
        methods: {
            tuichu() {
                location = "/logout";
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    });


</script>
</body>
</html>